<template>
  <div class="salary-list-page">
    <!-- 页面标题与返回按钮 -->
    <div class="page-header">
      <h2 class="page-title">员工薪资列表</h2>
      <el-button type="text" class="return-btn" @click="handleReturn">返回</el-button>
    </div>

    <!-- 月份选择器 -->
    <div class="month-picker">
      <el-date-picker
        v-model="selectedMonth"
        type="month"
        format="YYYY-MM"
        value-format="YYYY-MM"
        placeholder="选择月份"
        class="month-input"
      />
    </div>

    <!-- 薪资表格 -->
    <el-table
      :data="salaryList"
      border
      class="salary-table"
      style="width: 100%"
      show-summary
      :summary-method="getSummary"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center', background: '#f5f5f5' }"
    >
      <el-table-column prop="time" label="时间" width="80" />
      <el-table-column prop="name" label="姓名" width="80" />
      <el-table-column prop="position" label="职位" width="80" />
      <el-table-column prop="basicSalary" label="基本工资" width="100" />
      <el-table-column prop="performanceSalary" label="绩效工资" width="100" />
      <el-table-column prop="communication" label="通讯" width="80" />
      <el-table-column prop="traffic" label="交通" width="80" />
      <el-table-column prop="meal" label="餐费" width="80" />
      <el-table-column prop="socialSecurity" label="社保" width="80" />
      <el-table-column prop="bonus" label="奖金" width="80" />
      <el-table-column prop="fullAttendance" label="全勤奖" width="80" />
      <el-table-column prop="otherAllowance" label="其他" width="80" />
      <el-table-column prop="overtimePay" label="加班工资" width="100" />
      <el-table-column prop="seniorityPay" label="工龄工资" width="100" />
      <el-table-column prop="businessCommission" label="业务提成" width="100" />
      <el-table-column prop="lateDeduction" label="迟到扣款" width="100" />
      <el-table-column prop="leaveDeduction" label="请假扣款" width="100" />
      <el-table-column prop="socialSecurityDeduction" label="社保扣款" width="100" />
      <el-table-column prop="otherDeduction" label="其他扣款" width="100" />
      <el-table-column prop="incomeTax" label="个人所得税" width="120" />
      <el-table-column prop="payableSalary" label="应发工资" width="100" />
      <el-table-column prop="remark" label="备注" width="100" />
      <el-table-column label="操作" width="80">
        <template #default="scope">
          <el-button 
            type="primary" 
            plain
            class="modify-btn"
            @click="openModifyDialog(scope.row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <div class="pagination-area">
      <div class="total-info">共6条 共6页</div>
      
      <div class="page-controls">
        <el-button 
          type="text" 
          icon="el-icon-arrow-left" 
          @click="prevPage" 
          :disabled="currentPage === 1"
          class="page-btn"
        />
        <el-button
          v-for="page in pageList"
          :key="page"
          :class="currentPage === page ? 'page-num active' : 'page-num'"
          @click="currentPage = page"
        >
          {{ page }}
        </el-button>
        <el-button 
          type="text" 
          icon="el-icon-arrow-right" 
          @click="nextPage" 
          :disabled="currentPage === totalPages"
          class="page-btn"
        />
      </div>

      <div class="page-size">
        <el-select 
          v-model="pageSize" 
          @change="handlePageSizeChange"
          class="size-select"
        >
          <el-option label="10条/页" value="10" />
        </el-select>
      </div>

      <div class="jump-area">
        <span>跳至</span>
        <el-input 
          v-model="jumpPage" 
          class="jump-input" 
          @keyup.enter="handleJump"
        />
        <span>页</span>
        <el-button 
          type="primary" 
          class="jump-confirm"
          @click="handleJump"
        >
          确定
        </el-button>
      </div>
    </div>

    <!-- 修改薪资弹窗 -->
    <el-dialog 
      v-model="modifyDialogVisible" 
      title="修改员工薪资" 
      width="1000px"
      :close-on-click-modal="false"
    >
      <el-form :model="currentSalary" class="modify-form">
        <div class="form-row">
          <el-form-item label="时间" label-width="80px">
            <el-input v-model="currentSalary.time" disabled class="form-input" />
          </el-form-item>
          <el-form-item label="姓名" label-width="80px">
            <el-input v-model="currentSalary.name" disabled class="form-input" />
          </el-form-item>
          <el-form-item label="职位" label-width="80px">
            <el-input v-model="currentSalary.position" disabled class="form-input" />
          </el-form-item>
          <el-form-item label="基本工资" label-width="80px">
            <el-input v-model.number="currentSalary.basicSalary" class="form-input" />
          </el-form-item>
          <el-form-item label="绩效工资" label-width="80px">
            <el-input v-model.number="currentSalary.performanceSalary" class="form-input" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="通讯" label-width="80px">
            <el-input v-model.number="currentSalary.communication" class="form-input" />
          </el-form-item>
          <el-form-item label="交通" label-width="80px">
            <el-input v-model.number="currentSalary.traffic" class="form-input" />
          </el-form-item>
          <el-form-item label="餐费" label-width="80px">
            <el-input v-model.number="currentSalary.meal" class="form-input" />
          </el-form-item>
          <el-form-item label="社保" label-width="80px">
            <el-input v-model.number="currentSalary.socialSecurity" class="form-input" />
          </el-form-item>
          <el-form-item label="奖金" label-width="80px">
            <el-input v-model.number="currentSalary.bonus" class="form-input" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="全勤奖" label-width="80px">
            <el-input v-model.number="currentSalary.fullAttendance" class="form-input" />
          </el-form-item>
          <el-form-item label="其他补贴" label-width="80px">
            <el-input v-model.number="currentSalary.otherAllowance" class="form-input" />
          </el-form-item>
          <el-form-item label="加班工资" label-width="80px">
            <el-input v-model.number="currentSalary.overtimePay" class="form-input" />
          </el-form-item>
          <el-form-item label="工龄工资" label-width="80px">
            <el-input v-model.number="currentSalary.seniorityPay" class="form-input" />
          </el-form-item>
          <el-form-item label="业务提成" label-width="80px">
            <el-input v-model.number="currentSalary.businessCommission" class="form-input" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="迟到扣款" label-width="80px">
            <el-input v-model.number="currentSalary.lateDeduction" class="form-input" />
          </el-form-item>
          <el-form-item label="请假扣款" label-width="80px">
            <el-input v-model.number="currentSalary.leaveDeduction" class="form-input" />
          </el-form-item>
          <el-form-item label="社保扣款" label-width="80px">
            <el-input v-model.number="currentSalary.socialSecurityDeduction" class="form-input" />
          </el-form-item>
          <el-form-item label="其他扣款" label-width="80px">
            <el-input v-model.number="currentSalary.otherDeduction" class="form-input" />
          </el-form-item>
          <el-form-item label="个人所得税" label-width="80px">
            <el-input v-model.number="currentSalary.incomeTax" class="form-input" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="备注" label-width="80px">
            <el-input v-model="currentSalary.remark" class="form-input" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="modifyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleModifySubmit">保存修改</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue';
import { ElMessage } from 'element-plus';

// 月份选择器
const selectedMonth = ref('2025-11');

// 员工薪资数据
const salaryList = ref([
  {
    time: '2022.4',
    name: '李艳艳',
    position: '导师',
    basicSalary: 10000,
    performanceSalary: 3000,
    communication: 100,
    traffic: 200,
    meal: 300,
    socialSecurity: 400,
    bonus: 0,
    fullAttendance: 500,
    otherAllowance: 0,
    overtimePay: 0,
    seniorityPay: 0,
    businessCommission: 0,
    lateDeduction: 0,
    leaveDeduction: 0,
    socialSecurityDeduction: 0,
    otherDeduction: 0,
    incomeTax: 0,
    payableSalary: 19999,
    remark: ''
  },
  {
    time: '2022.3',
    name: '王艳',
    position: '导师',
    basicSalary: 10000,
    performanceSalary: 3000,
    communication: 100,
    traffic: 200,
    meal: 300,
    socialSecurity: 400,
    bonus: 0,
    fullAttendance: 500,
    otherAllowance: 0,
    overtimePay: 0,
    seniorityPay: 0,
    businessCommission: 0,
    lateDeduction: 0,
    leaveDeduction: 0,
    socialSecurityDeduction: 0,
    otherDeduction: 0,
    incomeTax: 0,
    payableSalary: 19999,
    remark: ''
  },
  {
    time: '2022.3',
    name: '孔明',
    position: '导师',
    basicSalary: 10000,
    performanceSalary: 3000,
    communication: 100,
    traffic: 200,
    meal: 300,
    socialSecurity: 400,
    bonus: 0,
    fullAttendance: 500,
    otherAllowance: 0,
    overtimePay: 0,
    seniorityPay: 0,
    businessCommission: 0,
    lateDeduction: 0,
    leaveDeduction: 0,
    socialSecurityDeduction: 0,
    otherDeduction: 0,
    incomeTax: 0,
    payableSalary: 19999,
    remark: ''
  },
  {
    time: '2022.3',
    name: '李艳艳',
    position: '导师',
    basicSalary: 10000,
    performanceSalary: 3000,
    communication: 100,
    traffic: 200,
    meal: 300,
    socialSecurity: 400,
    bonus: 0,
    fullAttendance: 500,
    otherAllowance: 0,
    overtimePay: 0,
    seniorityPay: 0,
    businessCommission: 0,
    lateDeduction: 0,
    leaveDeduction: 0,
    socialSecurityDeduction: 0,
    otherDeduction: 0,
    incomeTax: 0,
    payableSalary: 19999,
    remark: ''
  },
  {
    time: '2022.3',
    name: '李艳艳',
    position: '导师',
    basicSalary: 10000,
    performanceSalary: 3000,
    communication: 100,
    traffic: 200,
    meal: 300,
    socialSecurity: 400,
    bonus: 0,
    fullAttendance: 500,
    otherAllowance: 0,
    overtimePay: 0,
    seniorityPay: 0,
    businessCommission: 0,
    lateDeduction: 0,
    leaveDeduction: 0,
    socialSecurityDeduction: 0,
    otherDeduction: 0,
    incomeTax: 0,
    payableSalary: 19999,
    remark: ''
  }
]);

// 合计行计算
const getSummary = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
    } else if (['basicSalary', 'performanceSalary', 'communication', 'traffic', 'meal', 'socialSecurity', 'fullAttendance', 'payableSalary'].includes(column.prop)) {
      const total = data.reduce((sum, item) => {
        return sum + (item[column.prop] || 0);
      }, 0);
      sums[index] = `¥${total}`;
    } else {
      sums[index] = '-';
    }
  });
  return sums;
};

// 分页状态
const currentPage = ref(1);
const pageSize = ref('10');
const totalPages = ref(6);
const jumpPage = ref('');
const pageList = ref([1, 2, 3, 4]);

// 修改薪资弹窗状态
const modifyDialogVisible = ref(false);
const currentSalary = reactive({});

// 打开修改弹窗
const openModifyDialog = (row) => {
  // 深拷贝当前行数据
  Object.assign(currentSalary, JSON.parse(JSON.stringify(row)));
  modifyDialogVisible.value = true;
};

// 提交修改
const handleModifySubmit = () => {
  // 计算应发工资（示例逻辑）
  const income = currentSalary.basicSalary + currentSalary.performanceSalary + currentSalary.communication + currentSalary.traffic + currentSalary.meal + currentSalary.socialSecurity + currentSalary.fullAttendance + currentSalary.otherAllowance + currentSalary.overtimePay + currentSalary.seniorityPay + currentSalary.businessCommission;
  const deduction = currentSalary.lateDeduction + currentSalary.leaveDeduction + currentSalary.socialSecurityDeduction + currentSalary.otherDeduction + currentSalary.incomeTax;
  currentSalary.payableSalary = income - deduction;

  // 更新表格数据
  const index = salaryList.value.findIndex(item => item.time === currentSalary.time && item.name === currentSalary.name);
  if (index !== -1) {
    salaryList.value.splice(index, 1, toRaw(currentSalary));
  }

  ElMessage.success('薪资修改成功');
  modifyDialogVisible.value = false;
};

// 分页方法
const prevPage = () => currentPage.value > 1 && currentPage.value--;
const nextPage = () => currentPage.value < totalPages.value && currentPage.value++;
const handlePageSizeChange = (size) => {
  pageSize.value = size;
  ElMessage.info(`已切换为${size}条/页`);
};
const handleJump = () => {
  const page = Number(jumpPage.value);
  if (page && page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  } else {
    ElMessage.warning('请输入1-6的页码');
  }
  jumpPage.value = '';
};

// 返回按钮
const handleReturn = () => {
  ElMessage.info('已返回上一页');
};
</script>

<style scoped>
.salary-list-page {
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
  background: #fff;
}

/* 页面标题 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.return-btn {
  padding: 0;
  color: #666;
}

/* 月份选择器 */
.month-picker {
  margin-bottom: 20px;
}
.month-input {
  width: 150px;
}

/* 薪资表格 */
.salary-table {
  --el-table-border-color: #dcdcdc;
  margin-bottom: 20px;
}
.el-table__summary-row td {
  font-weight: 500;
  color: #333;
}

/* 分页区 */
.pagination-area {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}
.page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-btn {
  padding: 0;
}
.page-num {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #dcdcdc;
  background: #fff;
}
.page-num.active {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
}
.size-select {
  width: auto;
}
.jump-area {
  display: flex;
  align-items: center;
  gap: 4px;
}
.jump-input {
  width: 40px;
}
.jump-confirm {
  padding: 4px 8px;
}

/* 修改弹窗表单 */
.modify-form {
  padding: 10px 0;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}
.form-input {
  width: 120px;
}
.modify-btn {
  background: #fff;
  color: #fa8c16;
  border-color: #fa8c16;
  padding: 4px 8px;
}
</style>